<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>100个圆作业</title>
    <style type="text/css">
        * {

            margin: 0;
            padding: 0;
        }

        canvas {

            display: block;
            margin: 0 auto;
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas = document.querySelector("#canvas");

        canvas.width = 800;
        canvas.height = 600;

        var ctx = canvas.getContext("2d");

        function random(a, b) {

            return Math.ceil(Math.random( ) * (b - a) + a);
        }

        function drawArc(x, y, r, color) {

            ctx.beginPath();
            ctx.arc(x, y, r, 0, Math.PI*2);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.closePath();
        }

        for (var i = 0; i < 100; i++) {

            var r = random(0, 300);
            var x = random(r, 800 - r);
            var y = random(r, 600 - r);

            var color = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;

            drawArc(x, y, r, color);
        }
    </script>
</body>
</html>